<template>
  <view class="loading-box" :class="fixed ? 'fixed' : ''">
    <view class="gif-login">
      <view class="loading"></view>
      <view class="loading-title">加载中</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    fixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  created() {
  },
}
</script>

<style lang="scss">
.loading-box {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.gif-login {
  width: 200upx;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: gif-login-donghua .2s forwards;
}

@keyframes gif-login-donghua {
  0% {
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.loading {
  position: relative;
  width: 100upx;
  height: 100upx;
  background: linear-gradient(45deg,
      transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

.loading::before {
  content: '';
  position: absolute;
  top: 8upx;
  left: 8upx;
  bottom: 8upx;
  right: 8upx;
  background: #4AB16E;
  border-radius: 50%;
  z-index: 100;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  /* background: #000; */
  background: linear-gradient(45deg,
      transparent, transparent 40%, #e5f403);
  border-radius: 50%;
  z-index: 1;
  filter: blur(30upx);
}

.loading-title {
  position: absolute;
  font-size: 18upx;
  animation: title-animation 2s linear infinite;
}

@keyframes title-animation {
  0% {
    color: #fff;
    filter: blur(1upx) hue-rotate(0deg);
    text-shadow: 0 0 10upx #e5f403;
  }

  100% {
    color: #fff;
    filter: blur(1upx) hue-rotate(360deg);
    text-shadow: 0 0 10upx #e5f403;
  }
}
</style>
